<template>
  <div class="panel-container" >
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="基本信息" name="1" class="custom-collapse-item basic-info-item">
        <div>姓名：张三</div>
        <div>性别：男</div>
        <div>手机号码:138xxxx5678</div>
        <div>电子邮箱:zhangsan@examole.com</div>
        <div>身份证号码：310********1234</div>
        <div>出生日期：1990-01-15</div>
      </el-collapse-item>
      <el-collapse-item title="账户信息" name="2" class="custom-collapse-item basic-info-item">
        <div>用户名：zhangsan888</div>
        <div>会员等级：黄金会员</div>
        <div>积分:1250</div>
        <div>账户余额:￥2560.00</div>
        <div>支付方式：微信支付/支付宝</div>
      </el-collapse-item>
      <el-collapse-item title="购票相关信息" name="3" class="custom-collapse-item basic-info-item">
        <div>订单记录：32条</div>
        <div>常用联系人：3人</div>
        <div>收藏夹：5个项目</div>
      </el-collapse-item>
      <el-collapse-item title="个性化设置" name="4" class="custom-collapse-item basic-info-item">
        <div>接受通知偏好：邮件/短信</div>
        <div>语言偏好：简体中文</div>
        <div>界面主题:浅色模式</div>
      </el-collapse-item>
      <el-collapse-item title="其他设置" name="5" class="custom-collapse-item">
        <div>实名认证状态：已认证</div>
        <div>隐私设置：标准模式</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { CollapseModelValue } from 'element-plus'

const activeNames = ref(['1'])
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}
</script>

<style scoped>

.panel-container {
  max-width: 800px; 
  margin: 0 auto; 
  margin-top: 50px;
  padding: 20px; 
  background-color: #f0f0f0
}

::v-deep .custom-collapse-item .el-collapse-item__header {
  color: #7f99d3; 
  font-weight: 500; 
  font-size: 20px;
  transition: color 0.3s ease; /* 添加过渡效果使颜色变化更平滑 */
}

/* 基本信息点击样式 */
::v-deep .basic-info-item .el-collapse-item__header {
  cursor: pointer;
}

/* 点击时的颜色 */
::v-deep .basic-info-item .el-collapse-item__header:active {
  color: #4096ff;
}

/* 展开状态的颜色 */
::v-deep .basic-info-item.is-active .el-collapse-item__header {
  color: #4096ff;
  font-weight: bold;
  background-color: aqua;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>